<template>
  <el-row class="side_panel">
    <!-- 用户列表 -->
    <el-card>
      <!-- 玩家列表 -->
      <div class="panel-area">
        <ul class="participants">
          <li v-for="(item,index) in nicknames" :key="index">
            <span class="profile"><el-avatar :src="item.profile" /></span>
            <el-badge :value="item.score" class="item">
              <el-button size="small">{{ item.nickname }} {{ item.nickname == nickname ? '(我) ' : '' }}</el-button>
            </el-badge>
            <span />
            <el-tag v-if="item.nickname == holder" size="mini">主持</el-tag>
          </li>
        </ul>
      </div>

      <!-- 按钮工具栏 -->
      <div class="panel-area button-area">
        <el-button
          v-if="!holder"
          type="primary"
          size="small"
          icon="el-icon-edit"
          @click="isGameStarted"
        >主持游戏</el-button>

        <el-button
          v-else-if="holder == nickname"
          type="warning"
          size="small"
          icon="el-icon-delete"
          @click="isgameStop"
        >终止游戏</el-button>

        <el-button
          v-else
          type="success"
          size="small"
          icon="el-icon-magic-stick"
          @click="guessResult"
        >猜答案</el-button>

        <el-button
          type="danger"
          size="small"
          icon="el-icon-switch-button"
          @click="stopGame"
        >退出游戏
        </el-button>
      </div>

      <!-- 弹出框：主持人设置答案 -->
      <el-dialog
        title="请设置答案"
        :visible.sync="resultDialogVisible"
        width="30%"
      >
        <el-input v-model="expectImageName" placeholder="请输入您的答案" />

        <span slot="footer" class="dialog-footer">
          <el-button @click="resultDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveDialogHandler">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 弹出框：答题人设置答案 -->
      <el-dialog
        title="请填写答案"
        :visible.sync="answerDialogVisible"
        width="30%"
      >
        <el-input v-model="inputImageName" placeholder="请输入您的答案" />

        <span slot="footer" class="dialog-footer">
          <el-button @click="answerDialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="saveAnswerDialogHandler"
          >确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
    <ChatRoom />
  </el-row>
</template>

<script>
import { MessageBox } from 'element-ui'
import { mapState } from 'vuex'
import ChatRoom from './chatRoom/index.vue'
export default {
  components: { ChatRoom },
  data() {
    return {
      resultDialogVisible: false,
      expectImageName: '',
      answerDialogVisible: false,
      inputImageName: ''

    }
  },
  computed: {
    ...mapState(['nicknames', 'nickname', 'holder'])

  },
  methods: {
    // 主持人填写答案确认
    saveDialogHandler() {
      if (!this.expectImageName) {
        this.$message.error('答案不能为空!')
        return
      }
      // 2向服务器发起申请，开始主持游戏
      this.$store.dispatch('sendStartGame', this.expectImageName.trim())
      // 3关闭弹窗
      this.resultDialogVisible = false
      this.expectImageName = ''
    },

    // 玩家填写答案确认
    saveAnswerDialogHandler() {
      if (!this.inputImageName) {
        this.$message.error('答案不能为空!')
        return
      }
      // 向服务器校验答案正确性
      this.$store.dispatch('sendDanswerGame', this.inputImageName.trim())
      // 关闭弹窗清除记录
      this.answerDialogVisible = false
      this.inputImageName = ''
    },
    // 点击主持按钮
    isGameStarted() {
      // 显示弹窗
      this.resultDialogVisible = true
    },
    // 点击终止游戏游戏按钮
    isgameStop() {
      MessageBox.confirm('确认结束游戏?')
        .then(res => {
          this.$store.dispatch('sendStopGame', false)
          this.$store.commit('updateCountDown', false)
        })
    },
    // 玩家进行猜答案
    guessResult() {
      // 显示猜答案弹窗
      this.answerDialogVisible = true
    },
    // 点击退出游戏按钮
    stopGame() {
      this.$confirm('是否退出游戏', '温馨提示').then(() => {
        this.$store.commit('updateCountDown', false)
        this.$store.dispatch('sendUserLeave')
        this.$router.replace('/login')
      }).catch(e => {
        console.log(e)
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.panel-area {
  margin: 10px 0;
}
.participants{
  li{
    display: flex;
    align-items: center;
    > span{
      margin-right: 5px;
    }
  }
}
@media screen and (max-width: 769px){
  .el-dialog__wrapper ::v-deep .el-dialog{
    width: 80% !important;
  }
}

</style>
